import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd'
import {
  formatThousandSeparator,
  precisionOperation,
  randomNumber,
  deepClone,
  formatDate,
  exactRound,
  getType,
  isNullObject,
  roughFormatDate,
  exactFormatDate,
  turnCase,
  removeRepetitive,
  colorConvertRgba,
  formatChineseNumeral
} from '@/utils'
import { Cookie, Storage } from '@/utils/storage'
import { fetchCnodeList, fetchDemoData } from '@/utils/http/api'

const Practice: React.FC = () => {
  const navigate = useNavigate()
  const aa = 100.01
  const bb = 111900.0000056789
  const cc = 123456789036.333
  console.log('千位分隔符---', aa, formatThousandSeparator(aa))
  console.log('千位分隔符---', bb, formatThousandSeparator(bb))
  console.log('千位分隔符---', cc, formatThousandSeparator(cc))

  const a = Math.round(Math.random() * 10000) / 100 && 0.1
  const b = Math.round(Math.random() * 1000) / 1000 && 0.2

  console.log('精度运算---', a, b, precisionOperation([a, b], '*'), a * b)
  console.log('随机数---', randomNumber(-3, -1))

  const obj1: any = {
    a: 666,
    b: {
      c: 666,
      d: 0,
      e: false,
      f: null,
      g: undefined,
      h() {
        console.log(666)
      }
    }
  }
  obj1.obj = obj1
  const obj2 = deepClone(obj1)
  obj1.a = 999
  obj2.b.c = 10000
  obj2.b.h = 666
  obj2.c = 999
  console.log('#深复制：原对象---', obj1);
  console.log('#深复制：拷贝对象---', obj2);
  console.log('#深复制---', deepClone(1000));

  const t: any = new Date()
  console.log('格式化日期---', t, formatDate(new Date(), 'LLLLLLLLL'));
  console.log('粗略计算时间---', t, roughFormatDate(t));
  console.log('精确计算时间---', t, exactFormatDate(t));

  const nums = 50.5995
  console.log('四舍五入---', nums, exactRound(nums, 3));

  const obj: any = []
  console.log('类型检测---', obj, getType(obj));
  console.log('对象为空---', obj, isNullObject(obj));

  const str = '  all listaa A cY  der    aaa    你好 cty'

  console.log('大小写转换，全大写---', turnCase(str, 'XX'));
  console.log('大小写转换，全小写---', turnCase(str, 'xx'));
  console.log('大小写转换，仅仅首字母大写---', turnCase(str, 'X_xx'));
  console.log('大小写转换，所有词组首字母大写---', turnCase(str, 'X_XX'));
  console.log('大小写转换，默认---', turnCase(str));


  const arr1 = [
    { id: 1, name: '刘麻子', age: 18, hobby: 1, },
    { id: 2, name: '张三', age: 28, hobby: 1, },
    { id: 1, name: '李四', age: 18, hobby: 1, },
    { id: 3, name: '张三', age: 38, hobby: 1, },
    { id: 4, name: '王老五', age: 19, hobby: 1, },
    { id: 4, name: '刘麻子', age: 16, hobby: 1, },
    { id: 5, name: '臭猪猪', age: 21, hobby: 1, },
    { id: 6, name: '傻憨憨', age: 25, hobby: 1, },
    { id: 3, name: '土老帽', age: 19, hobby: 1, },
    { id: 2, name: '李四', age: 38, hobby: 1, },
  ]
  const arr2 = [1, 2, 3, 4, 5, 1, 3, 2,]

  console.log('指定数组去重, id---', arr1, removeRepetitive(arr1, 'id'));
  console.log('指定数组去重, 基本数据类型---', arr2, removeRepetitive(arr2));

  const cookie = new Cookie('ling')
  const cookie2 = new Cookie()
  console.log('创建的cookie 实例---', cookie);

  cookie.setCookie('name', '小明', 10)
  cookie2.setCookie('name', '小明')
  cookie.setCookie('age', 28)
  cookie.setCookie('hobby', ['唱', '跳', 'Rap'])
  const name = 'hobby'
  console.log('指定输出cookie 的值---', name, cookie.getCookie(name));
  cookie.removeCookie('age')
  // cookie.clearCookie()

  const storage = new Storage('sessionStorage')
  storage.setStorage('storage1', arr1)
  storage.setStorage('storage2', arr2)
  console.log('输出storage 的值---', 'storage1', storage.getStorage('storage1'));
  // storage.removeStorage('storage1')
  // storage.clearStorage()

  const color = '#ffff99'
  console.log('处理16进制的颜色---', color, colorConvertRgba(color))

  const num = '12345678910'
  console.log('格式化中文数值---', num, formatChineseNumeral(num));
  console.log('格式化中文数值，中文大写---', num, formatChineseNumeral(num, true));

  useEffect(() => {
    fetchCnodeList({
      page: 1, tab: 'good', limit: 5
    }).then(res => {
      console.log('get 请求的接口数据, fetchCnodeList---', res);
    })

    false && fetchDemoData({ name: 'ling' }).then(res => {
      console.log('post 请求的接口数据, fetchDemoData---', res);
    })
  }, [])


  const change = () => {
    navigate('/practice/other')
  }

  return (
    <>
      <Button type='primary' onClick={change}>
        跳转
      </Button>
      <div>练习</div>
    </>
  )
}

export default Practice